<div>
  <p>
    <em>
      Each rectangle in this diagram represents one of the
      <a href="#" popover="A state is a step in the reader's progress through the exploration. It is typically a single question." popover-placement="bottom" popover-trigger="mouseenter">states</a> making up this exploration. You can edit each state by clicking on its rectangle.
    </em>
    <a href="https://code.google.com/p/oppia/wiki/PlanningYourExploration" target="_blank">More info...</a>
  </p>

  <center ng-show="!isEndStateReachable()" class="oppia-warning">
    <i class="icon-warning-sign"></i>
    <strong>Warning: </strong>This exploration cannot be completed. The END state is unreachable.
  </center>

  <state-graph-viz val="graphData" allow-panning="true" current-state-name="getActiveStateName()"></state-graph-viz>

  <form ng-submit="addState(newStateDesc)">
    Add a new state:
    <input style="width: 30" type="text" ng-model="newStateDesc" placeholder="New State Name" required>
    <button class="btn" type="submit" ng-disabled="!isNewStateNameValid(newStateDesc)">
      Submit
    </button>
  </form>
</div>
